<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美嘉饲料</title>
<meta name="author" content="m.mjpiano.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" CONTENT="-1">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<link rel="stylesheet" href="/m/css/style.css">
<script type="text/javascript" src="<%=basePath%>skin/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/m/js/jquery.orbit.min.js"></script>
<script type="text/javascript" src="/m/js/common.js"></script>
<script language="javascript">
	$().ready(function(){
		var $quantity = $(".quantity");
		var $increase = $(".increase");
		var $decrease = $(".decrease");
		var $delete = $("a[id=delete]");
		var $effectivePrice = $("#effectivePrice");
		var $clear = $("#clear");
		var $submit = $("#submit");
		var timeouts = {};
		
		// 初始数量
		$quantity.each(function() {
			var $this = $(this);
			$this.data("text", $this.text());
		});
		
		// 增加
		$increase.click(function() {
			var $quantity = $(this).siblings(".quantity");
			var quantity = $quantity.text();
			if (/^\d*[1-9]\d*$/.test(quantity)) {
				$quantity.text(parseInt(quantity) + 1);
			} else {
				$quantity.text(1);
			}
			edit($quantity);
		});
		
		// 减少
		$decrease.click(function() {
			var $quantity = $(this).siblings(".quantity");
			var quantity = $quantity.text();
			if (/^\d*[1-9]\d*$/.test(quantity) && parseInt(quantity) > 1) {
				$quantity.text(parseInt(quantity) - 1);
			} else {
				$quantity.text(1);
			}
			edit($quantity);
		});
		
		// 编辑数量
		function edit($quantity) {
			var quantity = $quantity.text();
			if (/^\d*[1-9]\d*$/.test(quantity)) {
				var $tr = $quantity.parent();
				var id = $tr.find("input[name='id']").val();
				clearTimeout(timeouts[id]);
				timeouts[id] = setTimeout(function() {
					$.ajax({
						url: "<%=basePath%>cart/edit.shtml",
						type: "POST",
						data: {id: id, quantity: quantity},
						dataType: "json",
						cache: false,
						beforeSend: function() {
							$submit.prop("disabled", true);
						},
						success: function(data) {
							var success = data.success;
							if (success == "true") {
								$quantity.data("value", quantity);
								$tr.find("span.subtotal").text(data.subtotal.toFixed(2));
								if (!data.isLowStock) {
									$tr.find("span.lowStock").remove();
								}
								$effectivePrice.text(data.price.toFixed(2));
							} else {
								if (success == "false") {
									alert(data.message);
								} else {
									alert("编辑失败");
								}
								$quantity.text($quantity.data("text"));
								setTimeout(function() {
									location.reload(true);
								}, 3000);
							}
						},
						complete: function() {
							$submit.prop("disabled", false);
						}
					});
				}, 500);
			} else {
				$quantity.text($quantity.data("text"));
			}
		}

		// 删除
		$delete.click(function() {
			if (confirm("您确定要删除吗？")) {
				var $this = $(this);
				var $tr = $this.parent().parent();
				var id = $tr.find("input[name='id']").val();
				clearTimeout(timeouts[id]);
				$.ajax({
					url: "<%=basePath%>cart/delete.shtml",
					type: "POST",
					data: {id: id},
					dataType: "json",
					cache: false,
					beforeSend: function() {
						$submit.prop("disabled", true);
					},
					success: function(data) {
						var success = data.success;
						if (success == "true") {
							if (data.quantity > 0) {
								$tr.remove();
								$effectivePrice.text(data.price.toFixed(2));
							} else {
								location.reload(true);
							}
						} else {
							setTimeout(function() {
								location.reload(true);
							}, 3000);
						}
					},
					complete: function() {
						$submit.prop("disabled", false);
					}
				});
			}
			return false;
		});
		
		// 清空
		$clear.click(function() {
			if (confirm("您确定要清空吗？")) {
				$.each(timeouts, function(i, timeout) {
					clearTimeout(timeout);
				});
				$.ajax({
					url: "<%=basePath%>cart/clear.shtml",
					type: "POST",
					dataType: "json",
					cache: false,
					success: function(data) {
						var success = data.success;
						if (success == "true") {
							alert("清空成功");
						} else {
							alert("清空失败");
						}
						location.reload(true);
					}
				});
			}
			return false;
		});
	});
</script>
</head>
<body>
	<c:import url="/m/layouts/top.jsp" />
	<a name="top"></a>
	<!--header-->
	<header>
	<div class="header">
		<a href="javascript:pageBack();" class="header-a-back"><span>返回</span></a>
		<a href="/m/index.html" class="header-a-home"><span>首页</span></a>
		<h2>购物车</h2>
	</div>
	</header>
	<div class="space15"></div>
	<div class="cartdiv">
		<div class="cartlist">
			<c:choose>
				<c:when test="${cart == null || empty cart || cart.quantity < 1 }">
					您的购物车还是空的太遗憾啦！ <a href="<%=basePath%>m" class="buy-btn fr">立即购物</a>
				</c:when>
				<c:otherwise>
					<c:forEach items="${cart.cartItems }" var="cartItem">
						<div class="cartlistinner">
							<a href="/m/product.html" class="cart_orderlist_i"><img src="/m/images/pro1.png"></a>
							<div class="cart_orderlist_info">
								<a href="#">
									<p class="cart_g_name">
										${cartItem.product.name }
									</p>
								</a>
								<div class="amount-confirm-box">
									<a href="javascript:;" class="decrease amount-action amount-action-min">-</a> 
									<span class="quantity amount-text">${cartItem.quantity }</span>
									<input type="hidden" name="id" value="${cartItem.id}" />
									<a href="javascript:;" class="increase amount-action amount-action-max">+</a>
								</div>
							</div>
							<div class="cart_orderlist_p"> 
								<span class="c_price">￥<fmt:formatNumber value="${cartItem.price }" pattern="0.00"/></span>
							</div>
							<span class="delete"><a href="javascript:;" id="delete"><img src="/m/images/del-icon.png" width="22" height="22"></a></span>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
			<div class="numcount">
				<span class="yingfu">商品总计:</span>
				<span class="erling" id="effectivePrice"><fmt:formatNumber value="${cart.price }" pattern="0.00"/></span>(不含运费)
			</div>
		</div>
	</div>
	<div class="navbar-fixed-bottom">
		<div class="payment-total-bar">
			<a href="/m/cart.shtml" class="cart-bar">购物车</a> <a
				href="/m/member/order/info.shtml" class="count-bar">结算</a>
		</div>
	</div>
	<c:import url="/m/layouts/foot.jsp" />
</body>
</html>
